{"componentChunkName":"component---src-templates-blog-post-js","path":"/Today I Learned/full_height_on_mobile_web/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"04c6cfb8-72bd-52c0-9f94-bfe7d5ffb7ed","excerpt":"문제의 상황 및 요구사항 전체 화면 높이를 차지하도록 요소의 스타일을 지정하려면 높이를 100vh로 설정하면된다. 하지만 예상되로 되지 않는 것을 경험할 것이다. 웹 브라우저에 기본적으로 보이는 주소 줄까지 높이로 계산해, 가려진 영역 때문에 스크롤이 발생한다. 해결 방안 사용자 정의 vh 사용 (CSS 변수) window.innerHeight를 사용하여 CSS 변수 —vh를 설정한다. 이제 전 영역에서 —vh를 사용할 수 있다. 100vh - 10vh - 1vh…","html":"

문제의 상황 및 요구사항

\n

전체 화면 높이를 차지하도록 요소의 스타일을 지정하려면 높이를 100vh로 설정하면된다. 하지만 예상되로 되지 않는 것을 경험할 것이다. 웹 브라우저에 기본적으로 보이는 주소 줄까지 높이로 계산해, 가려진 영역 때문에 스크롤이 발생한다.

\n\"스크린샷\n

해결 방안

\n

사용자 정의 vh 사용 (CSS 변수)

\n

window.innerHeight를 사용하여 CSS 변수 —vh를 설정한다.

\n
// 1)\nwindow.addEventListener('resize', () => { \n  document.querySelector(':root').style\n    .setProperty('--vh', window.innerHeight/100 + 'px');\n})\n\n// 2)\nconst vh = window.innerHeight * 0.01;\nthis.elementRef.nativeElement.style.setProperty('--vh', `${vh}px`);
\n

이제 전 영역에서 —vh를 사용할 수 있다.

\n
min-height: calc(100vh - #{$edge-height});\nmin-height: calc(var(--vh, 1vh) * 100 - #{$edge-height});
\n\n
\n

참고 및 참조

\n\n
","frontmatter":{"title":"Full Height On mobile Web","date":"June 24, 2020"}}},"pageContext":{"slug":"/Today I Learned/full_height_on_mobile_web/","previous":{"fields":{"slug":"/Today I Learned/css_z-index/"},"frontmatter":{"title":"CSS z-index","category":"Today I Learned","draft":false}},"next":{"fields":{"slug":"/Today I Learned/mobile_touch_swipe_indicator/"},"frontmatter":{"title":"Mobile Touch Swipe Indicator","category":"Today I Learned","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}